<template>
    <div class="Login">
        <h2>欢迎来到万国仓库管理系统</h2>
        <div class="LoginBox">
            <div class="LoginBoxLeft">
                <img src="../assets/jpg/主页.jpg" alt="主页">
            </div>
            <div class="LoginBoxRight">
                <div v-if="numFalg === 1">
                    <div class="LoginBoxRightModuel">
                        <label for="id">工号/手机号</label><a-input type="text" id="id" @blur="InputBlur"
                            v-model:value="sub.adminId">
                            <template #prefix>
                                <i class="icon iconfont icon-yonghu"></i>
                            </template>
                        </a-input>
                    </div>
                    <div class="LoginBoxRightModuel">
                        <label for="password">输入密码</label>
                        <a-input-password id="password" v-model:value="sub.adminPassword" @blur="InputBlur">
                            <template #prefix>
                                <i class="icon iconfont icon-mima"></i>
                            </template>
                        </a-input-password>
                        <p v-if="FalgP" class="colorRed">{{ TextP }}</p>
                    </div>
                    <div class="LoginBoxRightModuel">
                        <label for="yzm">输入验证码</label>
                        <a-input id="text" v-model:value="sub.Text" @blur="InputBlur">
                        </a-input>
                        <yzm :width="120" :height="30" ref="yzmText" @click="but" class="yzm"></yzm>
                    </div>
                    <div class="but">
                        <a-button :disabled="FalgSub" @click="Sub">登录</a-button>
                        <span @click="overActive">{{ MessageTest }}</span>
                    </div>
                </div>
                <div v-else-if="numFalg === 2">
                    <div class="LoginBoxRightModuel">
                        <label for="id">工号/手机号</label><a-input type="text" id="id" @blur="InputBlur"
                            v-model:value="sub.adminId">
                            <template #prefix>
                                <i class="icon iconfont icon-yonghu"></i>
                            </template>
                        </a-input>
                    </div>
                    <div class="LoginBoxRightModuel">
                        <label for="password">输入新密码</label>
                        <a-input-password id="password" v-model:value="sub.adminPassword" @blur="InputBlur">
                            <template #prefix>
                                <i class="icon iconfont icon-mima"></i>
                            </template>
                        </a-input-password>
                        <p v-if="FalgP" class="colorRed">{{ TextP }}</p>
                    </div>
                    <div class="LoginBoxRightModuel">
                        <label for="yzm">输入验证码</label>
                        <a-input id="text" v-model:value="sub.Text" @blur="InputBlur">
                        </a-input>
                        <yzm :width="120" :height="30" ref="yzmText" @click="but" class="yzm"></yzm>
                    </div>
                    <div class="but">
                        <a-button :disabled="FalgSub" @click="Sub">重置密码</a-button>
                        <span @click="overActive">{{ MessageTest }}</span>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script lang="ts" setup >
import yzm from "../components/yaz.vue"
import { message } from 'ant-design-vue';
import { AdminLogin, AdminPassword } from "../Axios/General";
import { ref, onMounted } from "vue";
import { SetToken, SetLeave, SetName } from "../utils/token"
import { useRouter } from "vue-router"
const text = ref()
const FalgSub = ref(true)
const FalgP = ref(false)
const yzmText = ref()
const num = ref()
const numFalg = ref(1)
let res = ref()
const MessageTest = ref("忘记密码了？")

const Route = useRouter()
const TextP = ref("当前密码不存在")

const sub = ref({
    adminId: "",
    adminPassword: "",
    Text: ""
})



onMounted(() => {
    // text.value = yzmText.value.TextMessage
    // but()

})
const but = () => {
    yzmText.value.act()

}
const overActive = () => {
    numFalg.value === 1 ? numFalg.value = 2 : numFalg.value = 1
    numFalg.value === 1 ? MessageTest.value = "忘记密码了？" : MessageTest.value = "已有账号登录"


    sub.value = {
        adminId: "",
        adminPassword: "",
        Text: ""
    }
}

const InputBlur = () => {
    text.value = yzmText.value.TextMessage
    const arr = [/^(\d{6,10})|([a-z]{6,10})|([A-Z]{6,10})$/, /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/, /(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,10}/]
    if (sub.value.adminId.trim() && sub.value.adminPassword.trim() && sub.value.Text.trim()) {
        FalgSub.value = false
    } else {
        FalgSub.value = true
    }

    if (sub.value.adminPassword.trim()) {
        for (let index = 0; index < arr.length; index++) {
            if (arr[index].test(sub.value.adminPassword)) {
                num.value = index + 1
            }
        }
        FalgP.value = true
        if (!num.value) {
            TextP.value = "密码由6-10位组成"
            FalgSub.value = true

        } else if (num.value === 1) {
            TextP.value = "当前密码强度：弱"
            FalgSub.value = false

        } else if (num.value === 2) {
            TextP.value = "当前密码强度：中"
            FalgSub.value = false

        } else if (num.value === 3) {
            TextP.value = "当前密码强度：强"
            FalgSub.value = false

        }
    }

}
const Sub = async () => {
    if (sub.value.Text !== text.value) {
        message.warn("验证码错误")
    } else {
        sub.value.adminId = sub.value.adminId.trim()
        sub.value.adminPassword = sub.value.adminPassword.trim()
        if (numFalg.value === 1) {
            res.value = await AdminLogin(sub)
        } else {
            res.value = await AdminPassword(sub)

        }
        if (res.value) {
            if (res.value.code !== 200) {
                message.error(res.value.message);
            } else {
                message.success(res.value.message);
                if (numFalg.value === 1) {
                    SetToken(res.value.data.adminId);
                    SetLeave(res.value.data.adminAuthority);
                    SetName(res.value.data.adminName);
                    // nextTick(function () {
                    //     routeFalg()
                    // })

                    Route.push({
                        path: "/"
                    })
                } else {
                    sub.value = {
                        adminId: "",
                        adminPassword: "",
                        Text: ""
                    }
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.Login {
    height: 100%;
    width: 100%;
    text-align: center;

    h2 {
        margin-top: 30px;
    }

    .LoginBox {
        margin-top: 20px;
        padding: 0 30px;
        display: flex;


        .LoginBoxLeft {
            flex: 1;

            img {
                display: inline-block;
                width: 100%;
                height: 400px;
                object-fit: cover;
            }
        }

        .LoginBoxRight {
            margin-left: 20px;
            flex: 1;

            .LoginBoxRightModuel {
                margin-bottom: 20px;

                label {
                    display: block;
                    margin-bottom: 10px;
                    cursor: pointer;
                }

                p {
                    margin: 0;
                }

                p.colorRed {
                    color: red;
                }



                .ant-input-affix-wrapper {
                    width: 340px;
                }

                .ant-input {
                    width: 200px;

                }

                .yzm {
                    display: inline-block;
                    cursor: pointer;
                    vertical-align: middle;
                    margin-left: 20px;
                }
            }

            .but {
                span {
                    vertical-align: middle;
                    margin-left: 10px;
                    color: #280ffd;
                    cursor: pointer;
                }
            }

        }
    }
}
</style>